import React from 'react';
import { Form, Row, Col, Radio, Input } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { getSeverSetting } from '@/pages/OnboardAndLeave/LeaveManagement/service';
import { fetchInstitutions } from '@/pages/Attendance/Setting/service';
import { renderFormText, renderHiddenField } from '@/utils/utils';
import Sever from './Sever';

const Extra = props => {
    const { isEdit, form, formValueMap = {}, employeeData } = props;
    const { getFieldDecorator, getFieldValue } = form;
    const { data: setting = [] } = useRequest(getSeverSetting, {
        ...defaultFormatResult
    });

    const { data: rules = [] } = useRequest(
        () => fetchInstitutions({ expire: '0', organizationCode: employeeData.administrativeOrganizationCode }),
        {
            ready: !!employeeData.administrativeOrganizationCode,
            refreshDeps: [employeeData.administrativeOrganizationCode],
            ...defaultFormatResult
        }
    );

    const curSeverType = getFieldValue('severType') ?? formValueMap.severType ?? setting[0]?.severTypeInfo?.severType;

    const serverProps = {
        setting,
        rules,
        curSeverType
    };

    const curSeverTypeData = setting.find(item => item.severTypeInfo?.severType === curSeverType);

    const severTypeText = curSeverTypeData?.severTypeInfo?.severTypeName;

    const compensationFlag = curSeverTypeData?.compensationFlag;

    React.useEffect(() => {
        form.setFieldsValue({ compensationFlag });
    }, [compensationFlag]);

    return (
        <Row>
            <Row>
                <Col span={24}>
                    <Form.Item label="解除类型">
                        {isEdit ? (
                            getFieldDecorator('severType', {
                                initialValue: curSeverType
                            })(
                                <Radio.Group>
                                    {setting.map(item => {
                                        const key = item.severTypeInfo?.severType;
                                        return (
                                            <Radio key={key} value={key}>
                                                {item.severTypeInfo?.severTypeName}
                                            </Radio>
                                        );
                                    })}
                                </Radio.Group>
                            )
                        ) : (
                            <>
                                {renderFormText(severTypeText)}
                                {renderHiddenField({ form, field: 'severType', initialValue: curSeverType })}
                            </>
                        )}
                    </Form.Item>
                    <Form.Item style={{ display: 'none' }}>
                        {getFieldDecorator('compensationFlag')(<Input />)}
                    </Form.Item>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    {setting.map(item => {
                        const key = item.severTypeInfo?.severType;

                        return (
                            <div key={key} style={{ display: key === curSeverType ? 'block' : 'none' }}>
                                <Sever {...props} {...serverProps} severType={key} />
                            </div>
                        );
                    })}
                </Col>
            </Row>
        </Row>
    );
};

export default Extra;
